
<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>月收入统计</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <div style="display: flex;width: 100%;margin-bottom: 10px">
      <my-echart-left :sum="monthData.sum_money" :day="monthData.dey_mean"  style="margin-right: 10px" >
        <div v-if="incomeData.showState" style="background-color: #409EFF;line-height: 40px;border-bottom-left-radius:5px;border-bottom-right-radius:5px " @click="postState()" >
          <span style="font-size: 14px;color: #FFF">{{monthData.state==1?'已月结':'未月结'}}</span>
        </div>
      </my-echart-left>
        <my-echart :title="echartTitleData" :data="echartData" ></my-echart>
      </div>
      <el-row class="main">
        <el-row :gutter="10" style="min-height: 40px">
          <el-col :span="24" style="margin-bottom: 5px" align="left">
            <el-date-picker
              v-model="dateValue"
              @change="init()"
              value-format="timestamp"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-button v-if="incomeData.showExport" type="success" icon="el-icon-edit-outline" @click="exportExcel()" style="float: right">导出月收入统计</el-button>

          </el-col>
        </el-row>
        <!--表格-->
        <el-table
          border
          align="left"
          :data="tableData"
          style="width: 100%">

          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="sum_money"
            label="获得金额">
          </el-table-column>
          <el-table-column
            prop="sum_number"
            label="	推广人数">
          </el-table-column>
          <el-table-column
            prop="date"
            label="	日期">
          </el-table-column>
        </el-table>

      </el-row>
    </el-row>
    <excel-dao-chu ref="excel"   :my-data="excelData" :my-name="excelName"  :my-title-obj="excelTitleData"></excel-dao-chu>

  </div>
</template>

<script>
  import MyEchart from '../../components/MyEchart';
  import MyEchartLeft from '../../components/MyEchartLeft';
  import ExcelDaoChu from '../../components/ExcelDaoChu'

  export default {
    name: "AgentIncome",
    components: {MyEchart,MyEchartLeft,ExcelDaoChu},

    activated() {
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
     this.init()
    },
    data() {
      return {
        tableData: [],
        echartData: [],
        echartTitleData: [],
        monthData: {},
        pageSize: 10,
        currentPage: 1,
        dataTotal: 0,
        dateValue:[
          (new Date(new Date(new Date().toLocaleDateString()).getTime())-1000 * 60 * 60 * 24*(new Date().getDate()-1)),
          new Date()
        ],
        excelData:[],
        excelTitleData:{},
        excelName:'',
      }
    },
    computed: {
      typeApply(){
        return this.$store.state.login.typeApply
      },
      incomeData(){
        return this.$store.state.login.incomeData
      },
      startTime(){
        return this.dateValue?~~(this.dateValue[0]/1000):''
      },
      overTime(){
        return this.dateValue?~~(this.dateValue[1]/1000):''
      }
    },
    methods: {
      init(){
        this.getMonth()
        this.getstart()
      },
      //日收入
      getstart() {
        const prams = {
          page: this.currentPage, /*当前页码*/
          pageSize: this.pageSize, /*每页显示多少条数据*/
          type:this.typeApply==1||this.typeApply==2?2:3,
          id:this.incomeData.id,
          shop_id:this.incomeData.id,
          start_time:this.startTime,
          over_time:this.overTime
        }
        this.mySelectAll(this.incomeData.apiD,prams).then(value=>{
          this.tableData = value.data
          this.dataTotal = value.Total
          this.echartData=this.forTake(value.data,'sum_money')
          this.echartTitleData=this.forTake(value.data,'date')
        })
      },
      forTake(data,name){
        let s=[]
        data.forEach(data=>{
          s.push(data[name])
        })
        return s
      },
      // Excel导出
      exportExcel(){
        let thi= this
        const por={
          type:thi.typeApply,
          start_time:this.startTime,
          over_time:this.overTime,
          id:this.incomeData.id,
        }
        thi.mySelectAll('exportDayIncomeDetails',por).then(function (value) {
          let s={date:'上次结算时间：'+value.Total.agreetime,money:'推广总金额:'+value.Total.sum_money,sum_number:'未结算金额:'+value.Total.not_money}
          thi.excelData=[...value.data[0],s]
          thi.excelTitleData={date:'日期',money:'每天获得金额',sum_number:'每天推广人数'}
          thi.excelName='月收入统计'
          thi.$refs.excel.sureExcel()
        })
      },
      //提交月结
      postState(){
        let thi = this
        thi.$confirm('此操作将提交月结', '是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          const por={
            state:1,
            id:this.incomeData.id,
            start_time:~~(thi.dateValue[0]/1000),
            over_time:~~(thi.dateValue[1]/1000),
          }
         thi.mySubmit(this.incomeData.apiS,por).then(code=>{
           if(code==200)
           thi.getMonth()
         })
        }).catch(() => {
          thi.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //月收入统计
      getMonth(){
        const prams = {
          page: this.currentPage, /*当前页码*/
          pageSize: this.pageSize, /*每页显示多少条数据*/
          type:this.typeApply==1||this.typeApply==2?2:3,
          id:this.incomeData.id,
          shop_id:this.incomeData.id,
          start_time:this.startTime,
          over_time:this.overTime
        }
        this.mySelect(this.incomeData.apiM,prams).then( data=> this.monthData = data)
      },
      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getstart()
      },
      //分页
      handleCurrentChange(val) {
        this.currentPage = val
        this.getstart()
      },
    }
  }

</script>

<style scoped>
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
</style>
